<template>
    <el-card>
        <el-breadcrumb class="bread">
            <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index" :to="{ path: item.path, query: query }">
                {{item.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
    <el-card>
        <div class="block">
            <div style="display: inline-block; margin-right: 10px;">
                <el-link type="primary" style="margin-right: 20px;font-weight: 700;" :underline="false">{{ echartTitle.title }}</el-link>
                <span class="demonstration">请选择时间</span>
            </div>
            <el-date-picker 
            v-model="chartDatetime"  
            type="datetimerange" 
            range-separator="至" 
            start-placeholder="开始时间"
            end-placeholder="结束时间" 
            @change="updateChartData" 
            :disabled-date="disabledDate"
            />
        </div>
        <el-select v-model="deviceElement" placeholder="Select" style="width: 100px;margin-top: 10px;" filterable @change="changeDeviceEle">
            <el-option
                v-for="item in boxList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
            />
            </el-select>
        <v-chart v-loading="loading" class="chart" :option="newOption" />
        <div>
            <v-chart v-loading="loadingShort" class="chartShort" :option="newOptionShort" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { chart, boxShort } from '../api/index';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { echartTitleStore } from '../stores/index';

const deviceElement = ref();
const boxList = ref([]);
const echartTitle = echartTitleStore();
const loading = ref(true);
const loadingShort = ref(false);
const firstConvas = ref(true);
const firstConvasShort = ref(true);

const chartDatetime = ref([]);
const route = useRoute();
const query = ref({
    "boxId": window.sessionStorage.getItem("boxId"),
    "id": window.sessionStorage.getItem("id")
});
const crumbs = ref([
    {
        "path": "/projects",
        "title": "项目列表"
    },
    {
        "path": "/projects/box",
        "title": "项目详情"
    },
    {
        "path": "/projects/box/chart",
        "title": "项目折线图"
    },
])
const formSearch = reactive({
    id: route.query.id
});

const formSearchShort = reactive({
    id: route.query.id
})

const disabledDate = (date) =>{
    const currentDate = new Date();
    const threeMonthsAgo = new Date();
    threeMonthsAgo.setMonth(currentDate.getMonth() - 3); // 获取三个月前的日期

    // 禁用三个月前的日期及更早的日期
    return date < threeMonthsAgo;
}

const date = new Date();
const timestamp = date.getTime();
const newTimestamp = timestamp - 3600*1000*5

const newOption = reactive({
    xAxis: {
        type: "category",
        data: [],
        axisLable: {
            interval: 30,
            show: true
        }
    },
    tooltip: {
        trigger: "axis"
    },
    yAxis: {
        type: "value"
    },
    series: [
        {
            data: [],
            type: "line",
            smooth: true
        }
    ]
});
// 另一个设备的图表渲染
const newOptionShort = reactive({
    xAxis: {
        type: "category",
        data: [],
        axisLable: {
            interval: 30,
            show: true
        }
    },
    tooltip: {
        trigger: "axis"
    },
    yAxis: {
        type: "value"
    },
    series: [
        {
            data: [],
            type: "line",
            smooth: true
        }
    ]
})

const getVariantList = async () => {
    const res = await chart(formSearch);
    try {
        if (res.status === 2000) {
            let isData = res.data.is_data;
            if (isData){
                newOption.xAxis.data = res.data.update_time;
                newOption.series[0].data = res.data.variant_value;
                chartDatetime.value[0] = date.setTime(res.data.start * 1000);
                chartDatetime.value[1] = date.setTime(res.data.end * 1000);
            }else{
                newOption.xAxis.data = []
                newOption.series[0].data = []
                ElMessage.warning("所选时间范围内暂无数据，请选择其它时间段！");
            }
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {

    } finally {
        loading.value = false;
        firstConvas.value = false;
    }
};
// 下面的图表
const getVariantListShort = async () => {
    const res = await chart(formSearchShort);
    try {
        if (res.status === 2000) {
            let isData = res.data.is_data;
            if (isData){
                newOptionShort.xAxis.data = res.data.update_time;
                newOptionShort.series[0].data = res.data.variant_value;
                chartDatetime.value[0] = date.setTime(res.data.start * 1000);
                chartDatetime.value[1] = date.setTime(res.data.end * 1000);
            }else{
                newOptionShort.xAxis.data = []
                newOptionShort.series[0].data = []
                ElMessage.warning("所选时间范围内暂无数据，请选择其它时间段！");
            }
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {

    } finally {
        loadingShort.value = false;
        firstConvasShort.value = false;
    }
};

// 执行
getVariantList();
function updateChartData() {
    loading.value = true;
    formSearch.start = Date.parse(chartDatetime.value[0]) / 1000;
    formSearch.end = Date.parse(chartDatetime.value[1]) / 1000;
    formSearchShort.start = Date.parse(chartDatetime.value[0]) / 1000;
    formSearchShort.end = Date.parse(chartDatetime.value[1]) / 1000;
    getVariantList();
    getVariantListShort();
}

onBeforeMount(()=>{
    getBoxList()
})
// 获取box列表
const getBoxList = async () => {
    const res = await boxShort({"boxId": route.query.boxId});
    if (res.status === 2000) {
        boxList.value = res.data;
    } else {
        ElMessage.error(res.message);
    }
}
// 当下拉列表发生改变时
const changeDeviceEle = async (value)=>{
    formSearchShort.id = value;
    getVariantListShort();
}


</script>
  
<style>
/* 定义图表的大小 */
.chart {
    width: 100%;
    height: 400px;
}

.chartShort{
    width: 100%;
    height: 400px;
}
</style>